<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <link rel="stylesheet" type="text/css" href="../static/css/common.css">
  <link rel="stylesheet" type="text/css" href="../static/js/layui/css/layui.css">
  <link href="../static/css/font-awesome.min.css" rel="stylesheet">
  <!--[if lt IE 9]>
  <script src="../static/js/html5.min.js"></script>
  <script src="../static/js/respond.min.js"></script>
  <![endif]-->
<link href="/jquery-multiple-admin/static/css/iframe/form-builder.0a75d.css" rel="stylesheet"></head>
<body>
<div class="main-content">

  <div class="layui-breadcrumb">
    <a href="/">首页</a>
    <a href="/demo/">演示</a>
    <a><cite>导航元素</cite></a>
  </div>

  <div class="content-scroll">
    <blockquote class="layui-elem-quote">
      本页面只是演示表单集合
    </blockquote>

    <div class="layui-container">
      <div class="layui-row">
        <div class="layui-col-md5">

          <form class="layui-form">
            <div class="layui-form-item draggable">
              <label class="layui-form-label">单行输入框</label>
              <div class="layui-input-block">
                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item draggable">
              <label class="layui-form-label">验证必填项</label>
              <div class="layui-input-block">
                <input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入"
                       autocomplete="off" class="layui-input">
              </div>
            </div>

            <div class="layui-form-item draggable">
              <div class="layui-inline">
                <label class="layui-form-label">验证手机</label>
                <div class="layui-input-inline">
                  <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
                </div>
              </div>
            </div>

            <div class="layui-form-item draggable">
              <div class="layui-inline">
                <label class="layui-form-label">多规则验证</label>
                <div class="layui-input-inline">
                  <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
                </div>
              </div>
            </div>

            <div class="layui-form-item draggable">
              <div class="layui-inline">
                <label class="layui-form-label">范围</label>
                <div class="layui-input-inline" style="width: 100px;">
                  <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="width: 100px;">
                  <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
                </div>
              </div>
            </div>

            <div class="layui-form-item draggable">
              <label class="layui-form-label">单行选择框</label>
              <div class="layui-input-block">
                <select name="interest" lay-filter="aihao">
                  <option value=""></option>
                  <option value="0">写作</option>
                  <option value="1" selected="">阅读</option>
                  <option value="2">游戏</option>
                  <option value="3">音乐</option>
                  <option value="4">旅行</option>
                </select>
              </div>
            </div>


            <div class="layui-form-item draggable">
              <div class="layui-inline">
                <label class="layui-form-label">分组选择框</label>
                <div class="layui-input-inline">
                  <select name="quiz">
                    <option value="">请选择问题</option>
                    <optgroup label="城市记忆">
                      <option value="你工作的第一个城市">你工作的第一个城市</option>
                    </optgroup>
                    <optgroup label="学生时代">
                      <option value="你的工号">你的工号</option>
                      <option value="你最喜欢的老师">你最喜欢的老师</option>
                    </optgroup>
                  </select>
                </div>
              </div>
            </div>

            <div class="layui-form-item draggable">
              <label class="layui-form-label">复选框</label>
              <div class="layui-input-block">
                <input type="checkbox" name="like[write]" title="写作">
                <input type="checkbox" name="like[read]" title="阅读" checked="">
                <input type="checkbox" name="like[game]" title="游戏">
              </div>
            </div>

            <div class="layui-form-item draggable">
              <label class="layui-form-label">原始复选框</label>
              <div class="layui-input-block">
                <input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="">
                <input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
                <input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled="">
              </div>
            </div>

            <div class="layui-form-item draggable">
              <label class="layui-form-label">开关-默认关</label>
              <div class="layui-input-block">
                <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
              </div>
            </div>
            <div class="layui-form-item draggable">
              <label class="layui-form-label">开关-默认开</label>
              <div class="layui-input-block">
                <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
              </div>
            </div>
            <div class="layui-form-item draggable">
              <label class="layui-form-label">单选框</label>
              <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男" checked="">
                <input type="radio" name="sex" value="女" title="女">
                <input type="radio" name="sex" value="禁" title="禁用" disabled="">
              </div>
            </div>
            <div class="layui-form-item layui-form-text draggable">
              <label class="layui-form-label">普通文本域</label>
              <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
              </div>
            </div>
          </form>

        </div>
        <div class="layui-col-md5 layui-col-md-offset1">
          <div class="ibox float-e-margins">
            <div class="ibox-title">
              <h5>拖拽左侧表单元素到此区域</h5>
            </div>
            <div class="ibox-content">
              <div class="layui-row">
                <div class="layui-col-md12 droppable sortable" style="">
                </div>
              </div>
              <button type="submit" class="layui-btn">创建表单</button>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
<script src="../static/js/layui/layui.all.js"></script>
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/jquery-ui-1.10.4.min.js"></script>
<script type="text/javascript" src="/jquery-multiple-admin/static/js/common.0a75d.js"></script><script type="text/javascript" src="/jquery-multiple-admin/static/js/iframe/form-builder.0a75d.js"></script></body>
</html>